// import { useIntersectionObserver } from '@vueuse/core'

export default {
  install (Vue) {
    // 全局自定义指令，那么我们视图中使用的时候，要通过 v-img="值"
    Vue.directive('img', {
      inserted (el, binding) {
        // todo：图片懒加载
        // 检测el节点是否出现在可视区域 原生实现

        const io = new IntersectionObserver(entries => {
          // 是否进满足条件
          if (entries[0].isIntersecting) {
            el.src = binding.value

            el.onerror = function () {
              el.src =
                'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
            }
            // 取消观察
            io.unobserve(el)
          }
        })

        // 开始观察
        io.observe(el)
        // 检测el节点是否出现在可视区域（vueuse:https://vueuse.org/core/useIntersectionObserver/）

        /**
         * el：观察的目标（谁出现在了可视区域内）
         */
        /**
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // isIntersecting 为true 代表节点出现在了，可视区域内
          if (isIntersecting) {
            el.src = binding.value

            el.onerror = function () {
              el.src =
                'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
            }

            // 停止监听
            stop()
          }
        })
         **/
      }
    })
  }
}
